<template>
  <div class="sign-wrap">
    <div class="sign-in">
      <IconLogoText />

      <div class="sign-form__wrap">
        <el-form
          ref="formRef"
          :model="formData"
          label-width="0px"
          :rules="rules"
          @submit.native.prevent="onSubmit"
        >
          <p class="sf-tips">你所在地区仅支持 手机号 / 微信 / 邮箱 登录</p>
          <el-form-item prop="username">
            <el-input
              v-model="formData.username"
              prefix-icon="el-icon-mobile-phone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>

          <el-form-item class="form-pwd" prop="password">
            <el-input
              v-model="formData.password"
              :type="viewPwd ? 'text' : 'password'"
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
            >
              <template #suffix>
                <div class="pointer" @click="handleViewPwd">
                  <el-icon v-show="viewPwd">
                    <IconEpView />
                  </el-icon>
                  <el-icon v-show="!viewPwd">
                    <IconEpHide />
                  </el-icon>
                </div>
              </template>
            </el-input>
          </el-form-item>

          <p class="sf-tips">注册登录即代表已阅读并同意我们的 用户协议 与 隐私政策</p>

          <el-form-item class="form-submit">
            <el-button class="form-submit__btn" type="primary" native-type="submit">登录</el-button>
          </el-form-item>
        </el-form>

        <div class="sign-up__btn">
          <router-link to="/signUp">立即注册</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { createForm } from './create'

const formData = createForm()

const rules = []

const viewPwd = false

const onSubmit = () => {
  console.log('onSubmit')
}

const handleViewPwd = () => {
  console.log('handleViewPwd')
}
</script>

<style lang="less">
@import 'loginAndLogout.less';
</style>
